<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <title>Vite + Vue</title>
      <style>
          .whirl-box {
              display: inline-block;
              font-size: 50px;
              /*-webkit-animation: whirl 1s linear infinite running;*/
              /*animation: whirl 1s linear infinite running;*/
              color: #BCB5DB;
              position:absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
          }
          @keyframes whirl {
              from {
                  transform: rotate(360deg);
              }
              to {
                  transform: rotate(0deg);
              }
          }
      </style>
  </head>
  <body>
    <div id="app">
        <img class = "whirl-box" src="./src/assets/loading.gif">
<!--        <i class="fa fa-spinner whirl-box" aria-hidden="true"></i>-->
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
